// TravelPlanner.vue

<template>
  <div class="travel-wizard">
    <nav-bar :activeComponent="'travels'"></nav-bar>
    <!-- 进度条 -->
    <div class="progress-bar">
      <div class="progress-inner" :style="{ width: progressWidth + '%' }"></div>
    </div>

    <!-- 主内容区域 -->
    <div class="wizard-container">
      <!-- 欢迎页 -->
      <div v-if="currentStep === 0" class="welcome-screen">
        <div class="welcome-content">
          <div class="welcome-icon">🌴</div>
          <h1>您好，</h1>
          <h2>让我们规划您的完美旅行！</h2>
          <button class="start-button" @click="nextStep">
            开始 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 步骤1: 基本信息 -->
      <div v-if="currentStep === 1" class="step-screen">
        <div class="step-header">
          <h2>基本旅行信息</h2>
          <p class="step-description">请告诉我们您的身份和团队信息</p>
        </div>

        <div class="form-container">
          <div class="input-group">
            <label>您的身份是</label>
            <select v-model="planData.identity" class="identity-select">
              <option value="" disabled selected>请选择您的身份...</option>
              <optgroup
                v-for="group in identityOptions"
                :key="group.label"
                :label="group.label"
              >
                <option
                  v-for="option in group.options"
                  :key="option.value"
                  :value="option.value"
                >
                  {{ option.label }}
                </option>
              </optgroup>
            </select>
          </div>

          <div class="input-group">
            <label>团队人数</label>
            <div class="number-selector">
              <button @click="decreaseNumber('totalPeople')" class="number-btn">
                -
              </button>
              <span class="number-display">{{ planData.totalPeople }}</span>
              <button @click="increaseNumber('totalPeople')" class="number-btn">
                +
              </button>
            </div>
          </div>

          <div class="input-group">
            <label>性别分布</label>
            <div class="option-buttons">
              <button
                v-for="option in genderDistributions"
                :key="option.value"
                :class="[
                  'option-btn',
                  planData.genderDistribution === option.value ? 'active' : '',
                ]"
                @click="planData.genderDistribution = option.value"
              >
                {{ option.label }}
              </button>
            </div>
          </div>

          <div class="input-group">
            <label>年龄段分布（多选）</label>
            <div class="preference-tags">
              <span
                v-for="range in ageRanges"
                :key="range.value"
                :class="[
                  'pref-tag',
                  isAgeRangeSelected(range.value) ? 'active' : '',
                ]"
                @click="toggleAgeRange(range.value)"
              >
                {{ range.label }}
              </span>
            </div>
          </div>
        </div>

        <div class="fixed-actions">
          <button class="continue-button" @click="nextStep">
            继续 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 步骤2: 目的地和出发城市 -->
      <div v-if="currentStep === 2" class="step-screen">
        <div class="step-header">
          <h2>旅行目的地</h2>
          <p class="step-description">添加您想去的地方和出发地</p>
        </div>

        <div class="form-container">
          <div class="destination-section">
            <h3>目的地</h3>
            <div class="selected-destinations">
              <div
                v-for="(dest, index) in selectedDestinations"
                :key="index"
                class="destination-tag"
              >
                {{ dest }}
                <span class="remove-tag" @click="removeDestination(index)"
                  >×</span
                >
              </div>
              <button
                @click="showDestinationPicker = true"
                class="add-destination-btn"
              >
                <span class="plus-icon">+</span> 添加目的地
              </button>
            </div>
          </div>

          <div class="travel-style-section">
            <h3>旅行风格（最多选择两种）</h3>
            <p class="style-hint">选择最适合您的旅行方式</p>
            <div class="style-options">
              <div
                v-for="style in travelStyles"
                :key="style.value"
                :class="[
                  'style-card',
                  isStyleSelected(style.value) ? 'active' : '',
                ]"
                @click="toggleTravelStyle(style.value)"
              >
                <div class="style-icon">
                  <span v-if="style.value === 'efficient'">⚡</span>
                  <span v-if="style.value === 'leisure'">🌴</span>
                  <span v-if="style.value === 'cultural'">🏛️</span>
                  <span v-if="style.value === 'nature'">🌿</span>
                  <span v-if="style.value === 'foodie'">🍜</span>
                </div>
                <div class="style-content">
                  <h4 class="style-title">{{ style.label }}</h4>
                  <p class="style-desc">{{ style.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 城市选择级联菜单 - 目的地 -->
        <!-- 城市选择级联菜单 - 目的地 -->
        <!-- 城市选择级联菜单 - 目的地 -->
        <div
          v-if="showDestinationPicker"
          class="city-picker-overlay"
          @click.self="showDestinationPicker = false"
        >
          <div class="city-picker">
            <div class="city-picker-header">
              <h3>选择目的地</h3>
              <button
                class="close-picker"
                @click="showDestinationPicker = false"
              >
                ×
              </button>
            </div>
            <div class="city-picker-content">
              <!-- 只保留城市选择列 -->
              <div class="city-column">
                <div
                  v-for="city in cities"
                  :key="city.value"
                  :class="[
                    'city-item',
                    selectedDestinations.includes(city.label) ? 'active' : '',
                  ]"
                  @click="addDestination(city.label)"
                >
                  {{ city.label }}
                </div>
              </div>
            </div>
            <div class="city-picker-footer">
              <button class="cancel-btn" @click="showDestinationPicker = false">
                取消
              </button>
              <button
                class="confirm-btn"
                @click="showDestinationPicker = false"
              >
                确定
              </button>
            </div>
          </div>
        </div>

        <!-- 城市选择级联菜单 - 出发地 -->

        <div class="fixed-actions">
          <button class="back-button" @click="prevStep">
            <span class="arrow">←</span> 上一步
          </button>
          <button
            class="continue-button"
            @click="nextStep"
            :disabled="selectedDestinations.length === 0"
          >
            继续 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 步骤3: 行程天数 -->
      <div v-if="currentStep === 3" class="step-screen">
        <div class="step-header">
          <h2>行程安排</h2>
          <p class="step-description">选择您的旅行天数</p>
        </div>

        <div class="form-container">
          <div class="input-group">
            <label>旅行天数</label>
            <div class="number-selector">
              <button @click="decreaseNumber('days')" class="number-btn">
                -
              </button>
              <span class="number-display">{{ planData.days }}</span>
              <button @click="increaseNumber('days')" class="number-btn">
                +
              </button>
            </div>
          </div>

          <div class="input-group">
            <label>住宿晚数</label>
            <div class="number-selector">
              <button @click="decreaseNumber('nights')" class="number-btn">
                -
              </button>
              <span class="number-display">{{ planData.nights }}</span>
              <button @click="increaseNumber('nights')" class="number-btn">
                +
              </button>
            </div>
          </div>
        </div>

        <div class="fixed-actions">
          <button class="back-button" @click="prevStep">
            <span class="arrow">←</span> 上一步
          </button>
          <button class="continue-button" @click="nextStep">
            继续 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 步骤4: 旅行偏好 -->
      <div v-if="currentStep === 4" class="step-screen">
        <div class="step-header">
          <h2>旅行偏好</h2>
          <p class="step-description">选择您期望的旅行体验</p>
        </div>

        <div class="form-container">
          <div class="preference-section">
            <h3>旅行风格（多选）</h3>
            <div class="preference-tags">
              <span
                v-for="tag in travelTags"
                :key="tag.value"
                :class="[
                  'pref-tag',
                  planData.travelTags.includes(tag.value) ? 'active' : '',
                ]"
                @click="toggleTag(tag.value)"
              >
                {{ tag.label }}
              </span>
            </div>
          </div>

          <div class="preference-section">
            <h3>起床时间</h3>
            <div class="time-selector">
              <select v-model="planData.wakeupTime" class="time-select">
                <option
                  v-for="time in wakeupTimes"
                  :key="time.value"
                  :value="time.value"
                >
                  {{ time.label }}
                </option>
              </select>
            </div>
          </div>

          <div class="preference-section">
            <h3>结束时间</h3>
            <div class="time-selector">
              <select v-model="planData.endTime" class="time-select">
                <option
                  v-for="time in endTimes"
                  :key="time.value"
                  :value="time.value"
                >
                  {{ time.label }}
                </option>
              </select>
            </div>
          </div>

          <div class="preference-section">
            <h3>行程结束后</h3>
            <div class="option-buttons">
              <button
                v-for="option in eveningOptions"
                :key="option.value"
                :class="[
                  'option-btn',
                  planData.eveningPlan === option.value ? 'active' : '',
                ]"
                @click="planData.eveningPlan = option.value"
              >
                {{ option.label }}
              </button>
            </div>
          </div>
        </div>

        <div class="fixed-actions">
          <button class="back-button" @click="prevStep">
            <span class="arrow">←</span> 上一步
          </button>
          <button class="continue-button" @click="nextStep">
            继续 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 步骤5: 行程特色 -->
      <div v-if="currentStep === 5" class="step-screen">
        <div class="step-header">
          <h2>行程特色</h2>
          <p class="step-description">选择您期望的行程类型</p>
        </div>

        <div class="form-container">
          <div class="preference-section">
            <h3>行程类型</h3>
            <div class="option-buttons">
              <button
                v-for="option in itineraryTypes"
                :key="option.value"
                :class="[
                  'option-btn',
                  planData.itineraryType === option.value ? 'active' : '',
                ]"
                @click="planData.itineraryType = option.value"
              >
                {{ option.label }}
              </button>
            </div>
          </div>

          <div class="preference-section">
            <h3>餐饮偏好</h3>
            <div class="option-buttons column-options">
              <button
                v-for="option in foodOptions"
                :key="option.value"
                :class="[
                  'option-btn',
                  planData.foodPreference === option.value ? 'active' : '',
                ]"
                @click="planData.foodPreference = option.value"
              >
                {{ option.label }}
              </button>
            </div>
          </div>

          <div class="preference-section">
            <h3>交通方式</h3>
            <div class="option-buttons">
              <button
                v-for="option in transportOptions"
                :key="option.value"
                :class="[
                  'option-btn',
                  planData.transport === option.value ? 'active' : '',
                ]"
                @click="planData.transport = option.value"
              >
                {{ option.label }}
              </button>
            </div>
          </div>
        </div>

        <div class="fixed-actions">
          <button class="back-button" @click="prevStep">
            <span class="arrow">←</span> 上一步
          </button>
          <button class="continue-button" @click="nextStep">
            继续 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 步骤6: 额外备注 -->
      <div v-if="currentStep === 6" class="step-screen">
        <div class="step-header">
          <h2>额外需求</h2>
          <p class="step-description">添加您的特殊需求和备注</p>
        </div>

        <div class="form-container">
          <div class="special-notes">
            <h3>特别备注</h3>
            <textarea
              v-model="planData.notes"
              placeholder="如有其他特殊需求，请在此填写..."
              rows="5"
              class="notes-textarea"
            ></textarea>
          </div>
        </div>

        <div class="fixed-actions">
          <button class="back-button" @click="prevStep">
            <span class="arrow">←</span> 上一步
          </button>
          <button class="generate-button" @click="generatePlan">
            生成行程 <span class="arrow">→</span>
          </button>
        </div>
      </div>

      <!-- 生成结果页 -->
      <div v-if="currentStep === 7" class="result-screen">
        <div v-if="isGenerating" class="loading-container">
          <div class="loading-spinner"></div>
          <h2>AI正在规划您的旅行...</h2>
          <p>这可能需要10-20秒，请稍候</p>
        </div>
        <div v-else class="json-response-container">
          <pre class="json-content">{{ aiResponse }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import {
  checkTravelPlanStatus,
  createTravelPlanTask,
  sendChatMessage,
} from "@/api/smartTravelStrategy";
import axios from "axios";
import { ElMessage } from "element-plus";

export default {
  name: "TravelPlanner",
  components: { NavBar },
  data() {
    return {
      showValidationError: false,
      identityOptions: [
        {
          label: "家庭类",
          options: [
            { value: "young-couple", label: "年轻夫妻" },
            { value: "family-with-kids", label: "带孩子的家庭" },
            { value: "family-with-toddlers", label: "带婴幼儿的家庭" },
            { value: "multi-generation-family", label: "三代同堂家庭" },
            { value: "elderly-couple", label: "老年夫妻" },
          ],
        },
        {
          label: "朋友类",
          options: [
            { value: "friends-group", label: "朋友团体" },
            { value: "college-friends", label: "大学同学" },
            { value: "female-friends", label: "闺蜜出游" },
            { value: "male-friends", label: "兄弟团" },
          ],
        },
        {
          label: "个人类",
          options: [
            { value: "solo-traveler", label: "一个人旅行" },
            { value: "solo-backpacker", label: "背包客" },
          ],
        },
        {
          label: "特殊目的",
          options: [
            { value: "honeymoon", label: "蜜月旅行" },
            { value: "graduation-trip", label: "毕业旅行" },
            { value: "business-trip", label: "商务出差" },
            { value: "photography-tour", label: "摄影之旅" },
          ],
        },
      ],
      // 性别分布选项
      genderDistributions: [
        { value: "balanced", label: "男女均衡" },
        { value: "more-male", label: "男性较多" },
        { value: "more-female", label: "女性较多" },
        { value: "all-male", label: "全男性" },
        { value: "all-female", label: "全女性" },
      ],

      // 年龄段选项
      ageRanges: [
        { value: "children", label: "儿童 (0-12岁)" },
        { value: "teenagers", label: "青少年 (13-17岁)" },
        { value: "young-adults", label: "青年 (18-35岁)" },
        { value: "middle-aged", label: "中年 (36-55岁)" },
        { value: "seniors", label: "老年 (56岁以上)" },
      ],
      // 在data()中添加
      travelStyleTemplates: {
        efficient:
          "我们希望这是一次高效率但全面的旅行体验，在有限时间内既能参观必打卡的景点，也能体验当地文化，欣赏自然风光，品尝美食，但行程安排要紧凑高效，每天能够探索最多的地方。请安排涵盖{目的地}必看景点和隐藏特色的行程，兼顾经典与小众，既有人文历史，也有自然风光，但请控制每个景点的时间，减少排队和等待。",

        leisure:
          "我们希望这是一次舒适轻松的旅行，不赶行程，每天的安排不要太满，保持悠闲节奏，但仍希望体验多元的旅行元素。请为我们安排既有经典景点，也有文化体验、自然风光和美食探索的行程，但每天不要超过3个主要景点，中间留有充足休息时间，可以悠闲地在咖啡馆小坐或随意漫步。",

        "cultural-efficient":
          "我们希望这是一次高效而深入的文化探索之旅，既能系统了解当地历史文化，又能在有限时间内体验丰富多元的内容。请优先安排重要的文化场所和历史景点，包括博物馆、古迹、传统街区，兼顾经典必游与隐藏小众景点，并合理规划路线，让我们能够高效参观，减少不必要的等待和路程。",

        "leisure-nature":
          "我们希望这是一次放松身心的自然之旅，以舒适的节奏欣赏大自然美景，不赶行程，享受慢生活。请以自然景观为主线设计行程，包括公园、山水、湖泊、花园等，每天不要超过2-3个主要景点，预留充足的自由活动和休息时间，让我们能够悠闲地漫步、拍照和发呆。",

        "cultural-food":
          "我们希望这是一次融合文化与美食的双重体验之旅，通过饮食了解当地文化，探访文化场所的同时品尝特色美食。请围绕文化场所和美食体验设计行程，安排参观历史街区、博物馆和传统建筑，同时穿插当地特色餐厅、美食街区和可能的烹饪课程，让我们能够从多维度感受当地文化。",

        "efficient-food":
          "我们希望这是一次高效的美食探索之旅，在有限时间内既能打卡必游景点，又能品尝当地各种特色美食。请根据餐厅位置合理安排游览路线，在品尝美食的同时高效参观周边景点，兼顾经典与小众，让我们在每天有限的时间里能体验最丰富的内容。",

        "leisure-cultural":
          "我们希望这是一次轻松舒适的文化之旅，以悠闲的节奏深入了解当地文化，不赶行程，有充分时间感受和思考。请安排富有文化内涵的景点和活动，包括博物馆、古迹、传统街区和文化体验，但每天不要超过2个主要景点，预留充足时间细细品味，可以在博物馆多停留，或在历史街区慢慢漫步。",
      },
      combinedStyleTemplates: {
        "efficient-cultural":
          "我们希望这是一次高效而深入的文化探索之旅，既能系统了解当地历史文化，又能在有限时间内体验丰富多元的内容。请优先安排重要的文化场所和历史景点，包括博物馆、古迹、传统街区，兼顾经典必游与隐藏小众景点，并合理规划路线，让我们能够高效参观，减少不必要的等待和路程。",

        "leisure-nature":
          "我们希望这是一次放松身心的自然之旅，以舒适的节奏欣赏大自然美景，不赶行程，享受慢生活。请以自然景观为主线设计行程，包括公园、山水、湖泊、花园等，每天不要超过2-3个主要景点，预留充足的自由活动和休息时间，让我们能够悠闲地漫步、拍照和发呆。",

        "cultural-foodie":
          "我们希望这是一次融合文化与美食的双重体验之旅，通过饮食了解当地文化，探访文化场所的同时品尝特色美食。请围绕文化场所和美食体验设计行程，安排参观历史街区、博物馆和传统建筑，同时穿插当地特色餐厅、美食街区和可能的烹饪课程，让我们能够从多维度感受当地文化。",

        "efficient-foodie":
          "我们希望这是一次高效的美食探索之旅，在有限时间内既能打卡必游景点，又能品尝当地各种特色美食。请根据餐厅位置合理安排游览路线，在品尝美食的同时高效参观周边景点，兼顾经典与小众，让我们在每天有限的时间里能体验最丰富的内容。",

        "leisure-cultural":
          "我们希望这是一次轻松舒适的文化之旅，以悠闲的节奏深入了解当地文化，不赶行程，有充分时间感受和思考。请安排富有文化内涵的景点和活动，包括博物馆、古迹、传统街区和文化体验，但每天不要超过2个主要景点，预留充足时间细细品味，可以在博物馆多停留，或在历史街区慢慢漫步。",

        "efficient-nature":
          "我们希望这是一次高效率的自然探索之旅，在有限时间内欣赏最精华的自然风光。请安排路线紧凑的自然景观游览计划，包括必看的自然奇观、公园和风景区，控制好每个景点的停留时间，减少不必要的等待，让我们能在有限时间内看到最多最美的风景。",

        "nature-foodie":
          "我们希望这是一次融合自然风光与美食体验的旅行，欣赏美丽风景的同时品尝当地特色美食。请在自然景区周边安排有特色的餐饮体验，可能的话选择环境优美、能欣赏风景的餐厅，让自然与美食相得益彰，给我们带来视觉与味觉的双重享受。",

        "leisure-foodie":
          "我们希望这是一次悠闲的美食之旅，以轻松的节奏探索当地美食文化，有充足的时间细细品味每一道佳肴。请安排在环境舒适的餐厅用餐，中间穿插轻松的游览活动，不赶行程，每天安排2-3个主要美食体验，让我们能够真正沉浸在当地的饮食文化中。",
      },
      aiResponse: "",
      fullResponseData: null,
      currentStep: 0,
      isGenerating: false,
      selectedDestinations: [],
      showDestinationPicker: false,
      showDeparturePicker: false,
      selectedProvince: "",
      selectedCity: "",
      departureProvince: "",
      tempDepartureCity: "",
      responseMessage: "",
      planData: {
        travelStyle: "leisure", // 默认选择悠闲风格
        selectedTravelStyles: ["leisure"], // 默认选择悠闲风格
        // 基本信息
        identity: "",
        totalPeople: 2,
        malePeople: 1,
        femalePeople: 1,

        // 旅行目的地
        departureCity: "",

        // 行程天数
        days: 3,
        nights: 2,

        // 旅行偏好
        travelTags: ["城市"],
        wakeupTime: "8:00",
        endTime: "21:00",
        eveningPlan: "dinner",

        // 行程特色
        itineraryType: "mixed",
        foodPreference: "local",
        transport: "can-rent",

        // 额外信息
        notes: "",
      },
      // 城市数据

      cities: [
        { value: "shijiazhuang", label: "石家庄市" },
        { value: "tangshan", label: "唐山市" },
        { value: "qinhuangdao", label: "秦皇岛市" },
        { value: "handan", label: "邯郸市" },
        { value: "xingtai", label: "邢台市" },
        { value: "baoding", label: "保定市" },
        { value: "zhangjiakou", label: "张家口市" },
        { value: "chengde", label: "承德市" },
        { value: "cangzhou", label: "沧州市" },
        { value: "langfang", label: "廊坊市" },
        { value: "hengshui", label: "衡水市" },
        { value: "dingzhou", label: "定州市" },
        { value: "xinji", label: "辛集市" },
      ],

      travelStyles: [
        {
          value: "efficient",
          label: "深度探索",
          description: "高效率、高强度体验目的地精华，适合时间有限的旅行者",
        },
        {
          value: "leisure",
          label: "悠闲漫步",
          description: "舒适节奏，享受慢生活，注重旅途中的舒适体验",
        },
        {
          value: "cultural",
          label: "文化浸润",
          description: "深入了解当地历史文化，探访博物馆与人文景观",
        },
        {
          value: "nature",
          label: "自然之旅",
          description: "亲近大自然，欣赏壮丽风光与自然景观",
        },
        {
          value: "foodie",
          label: "美食之旅",
          description: "以品尝当地美食为主线，探寻特色餐厅与美食街区",
        },
      ],
      // 旅行标签
      travelTags: [
        { value: "城市", label: "城市" },
        { value: "人文", label: "人文" },
        { value: "自然", label: "自然" },
        { value: "美食", label: "美食" },
        { value: "购物", label: "购物" },
        { value: "历史", label: "历史" },
        { value: "艺术", label: "艺术" },
        { value: "户外", label: "户外" },
      ],

      // 起床时间选项
      wakeupTimes: [
        { value: "6:00", label: "6:00" },
        { value: "7:00", label: "7:00" },
        { value: "8:00", label: "8:00" },
        { value: "9:00", label: "9:00" },
        { value: "10:00", label: "10:00" },
      ],

      // 结束时间选项
      endTimes: [
        { value: "18:00", label: "18:00" },
        { value: "19:00", label: "19:00" },
        { value: "20:00", label: "20:00" },
        { value: "21:00", label: "21:00" },
        { value: "22:00", label: "22:00" },
        { value: "23:00", label: "23:00" },
      ],

      // 晚上安排选项
      eveningOptions: [
        { value: "dinner", label: "慢慢吃饭" },
        { value: "rest", label: "回去休息" },
      ],

      // 行程类型选项
      itineraryTypes: [
        { value: "popular", label: "网红打卡" },
        { value: "niche", label: "小众特色" },
        { value: "mixed", label: "经典与小众结合" },
      ],

      // 餐饮偏好选项
      foodOptions: [
        { value: "local", label: "当地特色" },
        { value: "popular", label: "人气餐厅" },
        { value: "hidden", label: "隐藏宝藏" },
      ],

      // 交通方式选项
      transportOptions: [
        { value: "can-rent", label: "可以租车" },
        { value: "cannot-rent", label: "不可以租车" },
      ],
    };
  },
  computed: {
    progressWidth() {
      if (this.currentStep === 0) return 0;
      // 7步总进度
      return (this.currentStep / 7) * 100;
    },

    filteredDepartureCities() {
      return this.departureProvince
        ? this.cities[this.departureProvince] || []
        : [];
    },
  },
  methods: {
    // 添加验证方法到methods中
    validateStep1() {
      // 验证身份、人数和年龄段
      return (
        this.planData.identity &&
        this.planData.totalPeople > 0 &&
        this.planData.ageRanges &&
        this.planData.ageRanges.length > 0
      );
    },

    validateStep2() {
      // 验证目的地和旅行风格
      return (
        this.selectedDestinations.length > 0 &&
        this.planData.selectedTravelStyles &&
        this.planData.selectedTravelStyles.length > 0
      );
    },

    validateStep3() {
      // 验证行程天数和住宿晚数
      return this.planData.days > 0 && this.planData.nights > 0;
    },

    validateStep4() {
      // 验证旅行偏好
      return (
        this.planData.travelTags.length > 0 &&
        this.planData.wakeupTime &&
        this.planData.endTime &&
        this.planData.eveningPlan
      );
    },

    validateStep5() {
      // 验证行程特色
      return (
        this.planData.itineraryType &&
        this.planData.foodPreference &&
        this.planData.transport
      );
    },

    validateStep6() {
      // 备注是可选的，直接返回true
      return true;
    },
    // 检查风格是否被选中
    isStyleSelected(styleValue) {
      if (!this.planData.selectedTravelStyles) {
        this.planData.selectedTravelStyles = ["leisure"]; // 默认值
        return styleValue === "leisure";
      }
      // 遍历数组检查是否存在该值
      for (let i = 0; i < this.planData.selectedTravelStyles.length; i++) {
        if (this.planData.selectedTravelStyles[i] === styleValue) {
          return true;
        }
      }
      return false;
    },

    // 检查年龄段是否被选中
    isAgeRangeSelected(rangeValue) {
      if (!this.planData.ageRanges) {
        this.planData.ageRanges = ["young-adults"]; // 默认值
        return rangeValue === "young-adults";
      }
      // 遍历数组检查是否存在该值
      for (let i = 0; i < this.planData.ageRanges.length; i++) {
        if (this.planData.ageRanges[i] === rangeValue) {
          return true;
        }
      }
      return false;
    },
    // 切换年龄段
    toggleAgeRange(rangeValue) {
      if (!this.planData.ageRanges) {
        this.planData.ageRanges = [];
      }

      let found = false;
      let index = -1;

      // 查找元素位置
      for (let i = 0; i < this.planData.ageRanges.length; i++) {
        if (this.planData.ageRanges[i] === rangeValue) {
          found = true;
          index = i;
          break;
        }
      }

      if (found) {
        // 如果已选中，则移除
        this.planData.ageRanges.splice(index, 1);
      } else {
        // 如果未选中，添加到数组
        this.planData.ageRanges.push(rangeValue);
      }
    },
    // 切换旅行风格
    toggleTravelStyle(styleValue) {
      if (!this.planData.selectedTravelStyles) {
        this.planData.selectedTravelStyles = [];
      }

      let found = false;
      let index = -1;

      // 查找元素位置
      for (let i = 0; i < this.planData.selectedTravelStyles.length; i++) {
        if (this.planData.selectedTravelStyles[i] === styleValue) {
          found = true;
          index = i;
          break;
        }
      }

      if (found) {
        // 如果已选中，则移除
        this.planData.selectedTravelStyles.splice(index, 1);
      } else {
        // 如果未选中，检查是否已有两个选择
        if (this.planData.selectedTravelStyles.length < 2) {
          this.planData.selectedTravelStyles.push(styleValue);
        } else {
          // 如果已有两个选择，替换第一个
          this.planData.selectedTravelStyles.shift();
          this.planData.selectedTravelStyles.push(styleValue);
        }
      }
    },
    nextStep() {
      // 验证当前步骤
      let isValid = true;

      switch (this.currentStep) {
        case 1:
          isValid = this.validateStep1();
          break;
        case 2:
          isValid = this.validateStep2();
          break;
        case 3:
          isValid = this.validateStep3();
          break;
        case 4:
          isValid = this.validateStep4();
          break;
        case 5:
          isValid = this.validateStep5();
          break;
        case 6:
          isValid = this.validateStep6();
          break;
        // 欢迎页不需要验证
        case 0:
        default:
          isValid = true;
      }

      if (isValid) {
        if (this.currentStep < 7) {
          this.currentStep++;
        }
      } else {
        // 使用 Element Plus 的 Message 组件显示错误
        ElMessage({
          message: "请完成所有必填项后再继续",
          type: "error",
          duration: 3000,
          center: true,
        });
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--;
      }
    },
    decreaseNumber(field) {
      if (this.planData[field] > 1) {
        this.planData[field]--;
      }
    },
    increaseNumber(field) {
      // 设置合理的上限
      const maxValues = {
        totalPeople: 20,
        malePeople: 20,
        femalePeople: 20,
        days: 30,
        nights: 29,
      };

      if (this.planData[field] < (maxValues[field] || 10)) {
        this.planData[field]++;
      }
    },
    toggleTag(value) {
      if (this.planData.travelTags.includes(value)) {
        this.planData.travelTags = this.planData.travelTags.filter(
          (v) => v !== value
        );
      } else {
        this.planData.travelTags.push(value);
      }
    },
    formatResponse(text) {
      // 直接返回文本，不进行任何转换
      return text || "";
    },
    // 在TravelPlanner.vue中修改generatePlan方法
    async generatePlan() {
      this.isGenerating = true;
      this.nextStep(); // 先进入结果页面显示加载状态
      const rep = await axios.get("/model/jsonModel.txt");
      this.fileContent = rep.data;
      alert(this.fileContent);

      let message = this.fileContent;

      // 获取身份标签
      let identityLabel = "";
      for (const group of this.identityOptions) {
        const found = group.options.find(
          (item) => item.value === this.planData.identity
        );
        if (found) {
          identityLabel = found.label;
          break;
        }
      }
      message += `我们是${identityLabel || "旅行者"}，共${
        this.planData.totalPeople
      }人，`;

      // 性别分布描述
      const genderText =
        {
          balanced: "男女比例大致相当",
          "more-male": "男性较多",
          "more-female": "女性较多",
          "all-male": "全为男性",
          "all-female": "全为女性",
        }[this.planData.genderDistribution] || "男女比例大致相当";

      message += `${genderText}，`;

      // 年龄段描述
      if (this.planData.ageRanges.length > 0) {
        const ageLabels = this.planData.ageRanges.map((value) => {
          const ageItem = this.ageRanges.find((item) => item.value === value);
          return ageItem ? ageItem.label.split(" ")[0] : "";
        });
        message += `年龄段包括${ageLabels.join("、")}，`;
      }

      message += `打算去${this.selectedDestinations.join("、")}，`;
      message += `请帮我安排一个${this.planData.days}天${this.planData.nights}晚的旅行计划，`;

      message += `最好涵盖${this.planData.travelTags.join("/")}等不同的体验，`;
      // 根据选择的风格添加相应的模板文本
      let styleTemplate = "";
      if (this.planData.selectedTravelStyles.length === 1) {
        // 单一风格
        styleTemplate =
          this.travelStyleTemplates[this.planData.selectedTravelStyles[0]] ||
          "";
      } else if (this.planData.selectedTravelStyles.length === 2) {
        // 组合风格
        const sortedStyles = [...this.planData.selectedTravelStyles].sort();
        const combinedKey = sortedStyles.join("-");
        styleTemplate = this.combinedStyleTemplates[combinedKey] || "";
      }

      // 替换模板中的占位符
      styleTemplate = styleTemplate.replace(
        /{目的地}/g,
        this.selectedDestinations.join("、")
      );
      message += styleTemplate;

      message += `我们希望上午${this.planData.wakeupTime}起床，晚上${
        this.planData.endTime
      }结束行程，然后${
        this.planData.eveningPlan === "dinner" ? "慢慢吃饭" : "回去休息"
      }，`;
      message += `我们希望行程是${
        this.planData.itineraryType === "popular"
          ? "网红打卡"
          : this.planData.itineraryType === "niche"
          ? "小众特色"
          : "经典与小众结合"
      }旅游项目，希望有游客不曾探寻到的特别的当地特色，感受本地的人文气息，`;
      message += `也希望有第一次来${this.selectedDestinations.join(
        "、"
      )}，必须要去一次的旅游目的地，`;
      message += `请帮我们安排好早中晚餐，吃的不重样，最好是本地特色，否则也要是当地人常吃得到宝藏餐馆，不要说该吃什么，直接告诉我去那家店吃，`;
      message += `计划里还涵盖交通方式，以及交通时间，我${
        this.planData.transport === "can-rent" ? "可以" : "不可以"
      }租车`;

      // 使用API创建任务
      createTravelPlanTask(message)
        .then((response) => {
          console.log("完整响应:", response);
          console.log("响应数据:", response.taskId);
          if (response && response.taskId) {
            // 获取到任务ID后开始轮询结果
            alert(response.taskId);
            this.pollTaskResult(response.taskId);
          } else {
            this.aiResponse = "创建任务失败，请重试1";
            this.isGenerating = false;
          }
        })
        .catch((error) => {
          console.error("创建任务失败:", error);
          this.aiResponse = "创建任务失败，请重试2";
          this.isGenerating = false;
        });
    },

    // 轮询任务结果
    // 修改后的方法 - 只展示纯JSON
    // Improved pollTaskResult method to fix JSON parsing
    // 改进的pollTaskResult方法，正确处理响应并停止加载指示器
    pollTaskResult(taskId) {
      const maxAttempts = 120; // 最多尝试120次
      let attempts = 0;

      const checkResult = () => {
        attempts++;
        console.log(`正在检查任务状态，第${attempts}次尝试`);

        checkTravelPlanStatus(taskId)
          .then((response) => {
            console.log("任务状态响应:", response);

            if (response) {
              if (response.status === "completed") {
                // 任务完成 - 停止加载旋转图标
                this.isGenerating = false;

                try {
                  // 尝试提取并解析响应
                  if (
                    response.result &&
                    response.result.result &&
                    response.result.result.output
                  ) {
                    const responseText = response.result.result.output.content;
                    console.log("原始响应文本:", responseText);

                    try {
                      // 尝试解析为JSON
                      this.aiResponse = responseText.match(
                        /```json\n([\s\S]*?)\n```/
                      )[1];
                      this.$router.push({
                        path: "/travelGuidePage",
                        query: { aiResponse: this.aiResponse },
                      });
                      console.log("成功解析JSON");
                    } catch (parseError) {
                      // 如果JSON解析失败，则显示为文本
                      console.error("JSON解析错误:", parseError);
                      // this.aiResponse = cleanedData;
                    }
                  } else {
                    this.aiResponse = "未能解析服务器返回的数据";
                    console.error("缺少预期的响应结构:", response);
                  }
                } catch (error) {
                  console.error("处理响应时出错:", error);
                  this.aiResponse = "处理响应时出错: " + error.message;
                }
              } else if (response.status === "processing") {
                // 任务仍在处理中
                if (attempts < maxAttempts) {
                  setTimeout(checkResult, 3000); // 3秒后再次检查
                } else {
                  this.isGenerating = false;
                  this.aiResponse = "生成超时，请稍后重试";
                }
              } else if (response.status === "failed") {
                // 任务失败
                this.isGenerating = false;
                this.aiResponse =
                  "生成行程失败: " + (response.errorMessage || "未知错误");
              } else {
                // 其他状态
                this.isGenerating = false;
                this.aiResponse = "未知任务状态: " + response.status;
              }
            } else {
              this.isGenerating = false;
              this.aiResponse = "获取任务状态失败，返回空响应";
            }
          })
          .catch((error) => {
            console.error("检查任务状态失败:", error);
            if (attempts < maxAttempts) {
              setTimeout(checkResult, 3000); // 错误后继续尝试
            } else {
              this.isGenerating = false;
              this.aiResponse = "获取结果失败: " + error.message;
            }
          });
      };

      // 开始检查
      checkResult();
    },

    selectDepartureProvince(provinceValue) {
      this.departureProvince = provinceValue;
      this.tempDepartureCity = "";
    },
    selectDepartureCity(cityLabel) {
      this.tempDepartureCity = cityLabel;
    },
    addDestination(cityLabel) {
      if (
        !this.selectedDestinations.includes(cityLabel) &&
        this.selectedDestinations.length < 5
      ) {
        this.selectedDestinations.push(cityLabel);
      }
      // 不自动关闭，允许用户选择多个城市
    },
    removeDestination(index) {
      this.selectedDestinations.splice(index, 1);
    },
    confirmDestination() {
      this.showDestinationPicker = false;
    },
    confirmDeparture() {
      if (this.tempDepartureCity) {
        this.planData.departureCity = this.tempDepartureCity;
      }
      this.showDeparturePicker = false;
    },
  },
};
</script>

<style scoped>
.validation-error {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff4757;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 14px;
  box-shadow: 0 3px 10px rgba(255, 71, 87, 0.3);
  z-index: 100;
  animation: fadeInOut 3s ease;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  90% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
}
.identity-select {
  width: 100%;
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 16px;
  background-color: white;
  cursor: pointer;
  transition: border-color 0.2s;
}

.identity-select:focus {
  border-color: #ff9c4a;
  outline: none;
}
/* 旅游风格选择 */
.travel-style-section {
  margin-top: 25px;
  margin-bottom: 20px;
}

.travel-style-section h3 {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 500;
  color: #444;
}

.style-hint {
  color: #777;
  font-size: 14px;
  margin-bottom: 15px;
}

.style-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.style-card {
  display: flex;
  padding: 15px;
  border-radius: 12px;
  background-color: #f8f8f8;
  border: 1px solid #eee;
  cursor: pointer;
  transition: all 0.2s ease;
}

.style-card:hover {
  background-color: #fff0e6;
  transform: translateY(-2px);
}

.style-card.active {
  background-color: #fff0e6;
  border-color: #ff9c4a;
  box-shadow: 0 3px 10px rgba(255, 156, 74, 0.15);
}

.style-icon {
  font-size: 24px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
}

.style-content {
  flex: 1;
}

.style-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 5px 0;
  color: #333;
}

.style-desc {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* 响应式调整 */
@media (min-width: 768px) {
  .style-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
.travel-wizard {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  max-width: 100%;
  margin: 0 auto;
  background-color: #f9f7f3;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* 进度条 */
.progress-bar {
  height: 3px;
  background-color: #e6e9ed;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.progress-inner {
  position: absolute;
  height: 100%;
  background-color: #ff9c4a;
  transition: width 0.3s ease;
}

/* 主容器 */
.wizard-container {
  height: calc(100vh - 3px);
  overflow: hidden;
  position: relative;
}

/* 欢迎页面 */
.welcome-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  height: 100%;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  overflow: hidden;
}

.welcome-content {
  max-width: 500px;
}

.welcome-icon {
  font-size: 70px;
  margin-bottom: 20px;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.welcome-screen h1 {
  font-size: 40px;
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
}

.welcome-screen h2 {
  font-size: 24px;
  margin-bottom: 40px;
  font-weight: 400;
  color: #555;
}

.start-button {
  background: linear-gradient(to right, #ff9c4a, #ff7e5f);
  color: white;
  border: none;
  padding: 16px 40px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(255, 156, 74, 0.4);
}

.start-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 156, 74, 0.5);
}

.arrow {
  font-size: 20px;
}

/* 步骤页面通用样式 */
.step-screen {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  height: calc(100vh - 3px);
  overflow-y: auto;
  position: relative;
  padding-bottom: 80px; /* 为固定按钮留出空间 */
}

.step-header {
  text-align: center;
  margin-bottom: 30px;
}

.step-header h2 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.step-description {
  color: #666;
  font-size: 16px;
}

.fixed-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.back-button,
.continue-button,
.generate-button {
  background-color: #ff9c4a;
  color: white;
  border: none;
  padding: 14px 30px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  box-shadow: 0 4px 10px rgba(255, 156, 74, 0.3);
}

.back-button {
  background-color: transparent;
  color: #ff9c4a;
  border: 1px solid #ff9c4a;
  box-shadow: none;
}

.back-button:hover {
  background-color: rgba(255, 156, 74, 0.1);
  transform: translateY(-2px);
}

.continue-button:hover,
.generate-button:hover {
  background-color: #ff7e5f;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(255, 156, 74, 0.4);
}

.continue-button:disabled,
.generate-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 表单容器样式 */
.form-container {
  background-color: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 500;
  color: #444;
}

.text-input {
  width: 100%;
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 16px;
  transition: border-color 0.2s;
}

.text-input:focus {
  border-color: #ff9c4a;
  outline: none;
}

/* 人数选择器 */
.number-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 50px;
  overflow: hidden;
  width: 120px;
}

.number-btn {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  color: #555;
}

.number-display {
  width: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.gender-group {
  display: flex;
  gap: 20px;
}

.half-width {
  flex: 1;
}

/* 目的地选择 */
.destination-section {
  margin-bottom: 20px;
}

.destination-section h3 {
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 500;
  color: #444;
}

.selected-destinations {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.destination-tag {
  background-color: #f0f9ff;
  border: 1px solid #bde0fe;
  color: #0096c7;
  padding: 8px 12px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.remove-tag {
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
}

.add-destination-btn {
  background-color: #f0f9ff;
  border: 1px dashed #bde0fe;
  color: #0096c7;
  padding: 8px 15px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s;
}

.add-destination-btn:hover {
  background-color: #e1f5fe;
}

.plus-icon {
  font-size: 16px;
  font-weight: bold;
}

.city-select-btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background-color: white;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.2s;
}

.city-select-btn:hover {
  border-color: #ff9c4a;
}

.dropdown-icon {
  color: #999;
  font-size: 12px;
}

/* 城市选择级联菜单 */
.city-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.city-picker {
  background-color: white;
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.city-picker-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.city-picker-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-picker {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.city-picker-content {
  display: flex;
  overflow: hidden;
  flex: 1;
  height: 50vh;
}

.city-column {
  flex: 1;
  overflow-y: auto;
  border-right: 1px solid #eee;
}

.city-column:last-child {
  border-right: none;
}

.city-item {
  padding: 12px 15px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.city-item:hover {
  background-color: #f5f5f5;
}

.city-item.active {
  background-color: #f0f9ff;
  color: #0096c7;
  font-weight: 500;
}

.city-picker-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn,
.confirm-btn {
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
}

.cancel-btn {
  background-color: transparent;
  border: 1px solid #ddd;
  color: #666;
}

.confirm-btn {
  background-color: #ff9c4a;
  border: none;
  color: white;
}

/* 偏好设置样式 */
.preference-section {
  margin-bottom: 25px;
}

.preference-section h3 {
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 500;
  color: #444;
}

.preference-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pref-tag {
  background-color: #f5f5f5;
  padding: 8px 15px;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.pref-tag:hover {
  background-color: #ffe8d6;
}

.pref-tag.active {
  background-color: #ff9c4a;
  color: white;
}

/* 时间选择器 */
.time-selector {
  width: 100%;
}

.time-select {
  width: 100%;
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 16px;
  background-color: white;
  cursor: pointer;
}

/* 选项按钮 */
.option-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.column-options {
  flex-direction: column;
  align-items: flex-start;
}

.option-btn {
  background-color: #f5f5f5;
  border: 1px solid #eee;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.option-btn:hover {
  background-color: #ffe8d6;
}

.option-btn.active {
  background-color: #ff9c4a;
  color: white;
  border-color: #ff9c4a;
}

/* 特别备注 */
.special-notes {
  margin-bottom: 20px;
}

.notes-textarea {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 14px;
  resize: vertical;
  min-height: 150px;
  transition: border-color 0.2s;
}

.notes-textarea:focus {
  border-color: #ff9c4a;
  outline: none;
}

/* 结果页面 */
.result-screen {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  height: calc(100vh - 3px);
  overflow-y: auto;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #ffe0c2;
  border-top-color: #ff9c4a;
  animation: spin 1s infinite linear;
  margin-bottom: 25px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-container h2 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
}

.loading-container p {
  color: #666;
}

.ai-response-card {
  background-color: white;
  color: #333;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  padding: 25px;
  margin: 20px 0;
  line-height: 1.6;
  white-space: pre-line;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .gender-group {
    flex-direction: column;
    gap: 10px;
  }

  .option-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
